<template>
  <div ref="cases">
    <div class="content">
      <div class="title display-flex align-items-center justify-content-center">
        <h2 class="display-flex align-items-center justify-content-center">
          <img class="serverIcon" src="../../../assets/casesIcon.png" alt>
          <span>案例</span>
          <span>/</span>
        </h2>
        <p>我们的一些优秀产品</p>
      </div>
      <p class="zedaoshangcheng">则道商城3CO线上APP</p>
      <img class="leftPhone" src="../../../assets/content3Phone.png" alt>
      <img class="rightPro" src="../../../assets/content3Pics.png" alt>
      <p class="content3Desc">
        本款APP是为则道茶业量身定制的线上商城APP
        参照则道企业自家特有的销售模式，经过专门的分析
        验证、框架设计，内容涵盖4大用户群体，包含购物，
        进货，官宣，统计，管理等6大模块，集各类销售功
        能于一体的互联网平台解决方案。
      </p>
      <p class="fourProps">集成四大属性</p>
      <div class="picOuter display-flex justify-content-space-between align-items-center">
        <img src="../../../assets/content3SmallPhone1.png" alt>
        <img src="../../../assets/content3SmallPhone2.png" alt>
        <img src="../../../assets/content3SmallPhone3.png" alt>
        <img src="../../../assets/content3SmallPhone4.png" alt>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Cases',
  mounted:function(){
    this.$store.commit('setCases',this.$refs['cases'])
  }
};
</script>
<style scoped>
.content {
  width: 100%;
  height: 11.8rem;
  background-image: url("../../../assets/content3Bg.png");
  background-position: center;
  background-size: cover;
  padding-top: 0.3rem;
  position: relative;
}
.title {
  font-size: 0.33rem;
  color: #fff;
}
.title > p {
  top: 0.07rem;
}
.title > h2 > img {
  width: 0.6rem;
}
.zedaoshangcheng {
  color: #fff;
  opacity: 0.7;
  position: absolute;
  left: 5rem;
  font-size: 0.4rem;
  top: 2rem;
  font-weight: 200;
}
.leftPhone {
  width: 4.8rem;
  position: absolute;
  bottom: 0;
  left: 4.5rem;
}
.rightPro {
  position: absolute;
  right: 3.4rem;
  width: 7.6rem;
  top: 1.5rem;
}
.content3Desc {
  font-size: 0.25rem;
  position: absolute;
  right: 4.3rem;
  top: 7rem;
  opacity: 0.7;
  color: #fff;
  width: 5.3rem;
}
@media screen and (max-width: 500px) {
  .content3Desc{
    width: 11rem;
    right: 1.8rem;
  }
}
.fourProps {
  font-size: 0.45rem;
  color: #fff;
  opacity: 0.7;
  right: 5.7rem;
  bottom: 2rem;
  position: absolute;
  font-weight: 200;
}
.picOuter{
  width: 6.5rem;
  position: absolute;
  bottom: 0.4rem;
  right: 3.8rem;
}
.picOuter img{
  width: 1rem;
}
@media screen and (max-width: 500px) {
  .content{
    height: 13rem;
  }
  .zedaoshangcheng{
    top: 2.5rem;
  }
}
</style>
